<template>
    <div class="consumerLists">
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true" label-width="120px">
                <el-tabs type="border-card">
                    <el-tab-pane label="基本信息">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="姓名">
                                    <el-input v-model="queryParams.realname" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="性别">
                                    <el-radio-group v-model="queryParams.gender" class="ml-4">
                                        <el-radio label="1">男</el-radio>
                                        <el-radio label="2">女</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="民族">
                                    <el-select class="w-[280px]" v-model="queryParams.Nation">
                                        <el-option v-for="(item, key) in optionData.nation" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="出生日期">
                                    <el-date-picker v-model="queryParams.BirthDayRange" type="daterange"
                                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                        value-format="YYYY-MM-DD" />

                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="籍贯">
                                    <el-input v-model="queryParams.NativePlace" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="血型">
                                    <el-select class="w-[280px]" v-model="queryParams.BloodType">
                                        <el-option v-for="(item, key) in optionData.BloodType" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="出生地">
                                    <el-input v-model="queryParams.NativePlace" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="户籍所在地">
                                    <el-input v-model="queryParams.ResidenceDomain" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="户籍所在地补充">
                                    <el-input v-model="queryParams.ResidenceOther" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="身份证号">
                                    <el-input v-model="queryParams.IdCard" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="成长地">
                                    <el-input v-model="queryParams.GrowingPlace" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="婚姻状况">
                                    <el-select class="w-[280px]" v-model="queryParams.MaritalStatus">
                                        <el-option v-for="(item, key) in optionData.MaritalStatus" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="健康状况">
                                    <el-select class="w-[280px]" v-model="queryParams.HealthStatus">
                                        <el-option v-for="(item, key) in optionData.HealthStatus" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="健康描述">
                                    <el-input v-model="queryParams.HealthDescription" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="调入单位">
                                    <el-input v-model="queryParams.OldWorkUnit" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="户口性质">
                                    <el-select class="w-[280px]" v-model="queryParams.AccountNature">
                                        <el-option v-for="(item, key) in optionData.AccountNature" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="警号">
                                    <el-input v-model="queryParams.PersonalNo" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="人员身份">
                                    <el-select class="w-[280px]" v-model="queryParams.PersonalIdentity">
                                        <el-option v-for="(item, key) in optionData.PersonalIdentity" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="人员类别">
                                    <el-select class="w-[280px]" v-model="queryParams.PersonalCategory">
                                        <el-option v-for="(item, key) in optionData.PersonalCategory" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="人员专长">
                                    <el-input v-model="queryParams.Speciality" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="管理类别">
                                    <el-select class="w-[280px]" v-model="queryParams.ManagementCategory">
                                        <el-option v-for="(item, key) in optionData.ManagementCategory" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="工作单位">
                                    <el-input v-model="queryParams.WorkUnit" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="现任职务">
                                    <el-select v-model="queryParams.CurrentPosition" clearable>
                                        <el-option v-for="(item, key) in optionData.Position" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>

                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="原任职务">
                                    <el-select v-model="queryParams.OriginalPosition" clearable>
                                        <el-option v-for="(item, key) in optionData.Position" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>

                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="人员状态">
                                    <el-select class="w-[280px]" v-model="queryParams.PersonalStatus">
                                        <el-option v-for="(item, key) in optionData.PersonalStatus" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="班子成员类别">
                                    <el-input v-model="queryParams.TeamCategory" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="行政班子成员">
                                    <el-radio-group v-model="queryParams.AdministrativeTeamMember" class="ml-4">
                                        <el-radio label="0">否</el-radio>
                                        <el-radio label="1">是</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="党委班子成员">
                                    <el-radio-group v-model="queryParams.PartyCommitteeTeamMember" class="ml-4">
                                        <el-radio label="0">否</el-radio>
                                        <el-radio label="1">是</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="警种">
                                    <el-select class="w-[280px]" v-model="queryParams.OwnPoliceKind">
                                        <el-option v-for="(item, key) in optionData.OwnPoliceKind" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="人员岗位">
                                    <el-select class="w-[280px]" v-model="queryParams.PersonalJob">
                                        <el-option v-for="(item, key) in optionData.PersonalJob" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="政治面貌">
                                    <el-select class="w-[280px]" v-model="queryParams.PoliticalStatus">
                                        <el-option v-for="(item, key) in optionData.PoliticalStatus" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="参加组织时间">
                                    <el-date-picker v-model="queryParams.JoinGroupDateTimeRange" type="daterange"
                                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                        value-format="YYYY-MM-DD" />

                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="进入公务员时间">
                                    <el-date-picker v-model="queryParams.JoinPFDateTimeRange" type="daterange"
                                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                        value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="参加工作时间">
                                    <el-date-picker v-model="queryParams.JoinWorkDateTimeRange" type="daterange"
                                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                        value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="参加公安时间">
                                    <el-date-picker v-model="queryParams.JoinPoliceDateTimeRange" type="daterange"
                                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                        value-format="YYYY-MM-DD" />

                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="状态">
                                    <el-select class="w-[280px]" v-model="queryParams.Status">
                                        <el-option v-for="(item, key) in optionData.Status" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>

                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="在职变动时间">
                                    <el-date-picker v-model="queryParams.PositionChangeTimeRange" type="daterange"
                                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                        value-format="YYYY-MM-DD" />

                                </el-form-item>
                            </el-col>
                            <el-col :span="8">

                            </el-col>
                            <el-col :span="8">

                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="家庭成员">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="姓名">
                                    <el-input v-model="queryFamilyParams.Name" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="与该人关系">
                                    <el-select class="w-[280px]" v-model="queryFamilyParams.Relation">
                                        <el-option v-for="(item, key) in optionData.Relation" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>

                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="民族">
                                    <el-select class="w-[280px]" v-model="queryFamilyParams.Nation">
                                        <el-option v-for="(item, key) in optionData.nation" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="出生日期">
                                    <el-date-picker v-model="queryFamilyParams.BirthDayRange" type="daterange"
                                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                        value-format="YYYY-MM-DD" />

                                </el-form-item>

                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="人员身份">
                                    <el-select class="w-[280px]" v-model="queryFamilyParams.PersonalIdentity">
                                        <el-option v-for="(item, key) in optionData.PersonalIdentity2" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="工作单位">
                                    <el-input v-model="queryFamilyParams.WorkUnit" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="工作单位地址">
                                    <el-input v-model="queryFamilyParams.WorkUnitAddress" clearable class="w-[280px]" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="国籍">
                                    <el-select class="w-[280px]" v-model="queryFamilyParams.Nationality">
                                        <el-option v-for="(item, key) in optionData.Nationality" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="学历">
                                    <el-select class="w-[280px]" v-model="queryFamilyParams.Education">
                                        <el-option v-for="(item, key) in optionData.Education" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="职务">
                                    <el-input v-model="queryFamilyParams.Position" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="人员现状">
                                    <el-input v-model="queryFamilyParams.CurrentStatus" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="配偶子女移民">
                                    <el-radio-group v-model="queryFamilyParams.MigrateState" class="ml-4">
                                        <el-radio label="0">否</el-radio>
                                        <el-radio label="1">是</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="履历">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="所在单位">
                                    <el-input v-model="queryCurriculumvitaesParams.WorkUnit" clearable
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="履历类别">
                                    <el-select class="w-[280px]" v-model="queryCurriculumvitaesParams.Category">
                                        <el-option v-for="(item, key) in optionData.Category" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="身份或职务">
                                    <el-input v-model="queryCurriculumvitaesParams.Identity" clearable
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="职务级别">
                                    <el-input v-model="queryCurriculumvitaesParams.PostLevel" clearable
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="履历说明">
                                    <el-input v-model="queryCurriculumvitaesParams.Remark" clearable
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="基层工作标志">
                                    <el-radio-group v-model="queryCurriculumvitaesParams.Flag" class="ml-4">
                                        <el-radio label="0">否</el-radio>
                                        <el-radio label="1">是</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="开始时间">
                                    <el-date-picker v-model="queryCurriculumvitaesParams.StartDateRange"
                                        type="daterange" range-separator="至" start-placeholder="开始时间"
                                        end-placeholder="结束时间" value-format="YYYY-MM-DD" />

                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="截止日期">
                                    <el-date-picker v-model="queryCurriculumvitaesParams.EndDateRange" type="daterange"
                                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                        value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">

                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="职务层级">Curricu
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="职务层次">
                                    <el-input v-model="queryPotiongradesParams.Name" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="职务层次起算">
                                    <el-date-picker v-model="queryPotiongradesParams.GradeStartDateRange"
                                        type="daterange" range-separator="至" start-placeholder="开始时间"
                                        end-placeholder="结束时间" value-format="YYYY-MM-DD" />

                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="职务层次终止">
                                    <el-date-picker v-model="queryPotiongradesParams.GradeEndDateRange" type="daterange"
                                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                        value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="层级起算日期">
                                    <el-date-picker v-model="queryPotiongradesParams.LevelStartDateRange"
                                        type="daterange" range-separator="至" start-placeholder="开始时间"
                                        end-placeholder="结束时间" value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="批准日期">
                                    <el-date-picker v-model="queryPotiongradesParams.PassDateRange" type="daterange"
                                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                        value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="职务状态">
                                    <el-input v-model="queryPotiongradesParams.LogStatus" clearable
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="批准机关名称">
                                    <el-input v-model="queryPotiongradesParams.AppointmentOrganizationName" clearable
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="批准文号">
                                    <el-input v-model="queryPotiongradesParams.OrderNumber" clearable
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="批准文号">
                                    <el-input v-model="queryPotiongradesParams.Remark" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="学历">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="学历名称">
                                    <el-select class="w-[280px]" v-model="queryEducationParams.Name">
                                        <el-option v-for="(item, key) in optionData.Education" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="入学时间">
                                    <el-date-picker v-model="queryEducationParams.JoinDateRange" type="daterange"
                                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                        value-format="YYYY-MM-DD" />

                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="毕业时间">
                                    <el-date-picker v-model="queryEducationParams.GraduationDateRange" type="daterange"
                                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                        value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="学年制">
                                    <el-select class="w-[280px]" v-model="queryEducationParams.Years">
                                        <el-option v-for="(item, key) in optionData.Years" :key="key" :label="item.name"
                                            :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="学校名称">
                                    <el-input v-model="queryEducationParams.SchoolName" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="学校类别">
                                    <el-select class="w-[280px]" v-model="queryEducationParams.SchoolCategory">
                                        <el-option v-for="(item, key) in optionData.SchoolCategory" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="从学单位类型">
                                    <el-select class="w-[280px]" v-model="queryEducationParams.SchoolType">
                                        <el-option v-for="(item, key) in optionData.SchoolCategory" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="所学专业">
                                    <el-input v-model="queryEducationParams.Professional" clearable
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="毕业证书编号">
                                    <el-input v-model="queryEducationParams.CertificateNumber" clearable
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="学习形式">
                                    <el-select class="w-[280px]" v-model="queryEducationParams.LearnStyle">
                                        <el-option v-for="(item, key) in optionData.LearnStyle" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="学历说明">
                                    <el-input v-model="queryEducationParams.EducationInstructions" clearable
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="学历描述">
                                    <el-input v-model="queryEducationParams.Remark" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="学位">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="学位名称">
                                    <el-input v-model="queryDegreesParams.Remark" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="入学时间">
                                    <el-date-picker v-model="queryDegreesParams.StartDateRange" type="daterange"
                                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                        value-format="YYYY-MM-DD" />

                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="学位授予日期">
                                    <el-date-picker v-model="queryDegreesParams.GetDateRange" type="daterange"
                                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                        value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="授予国家">
                                    <el-select class="w-[280px]" v-model="queryDegreesParams.Country">
                                        <el-option v-for="(item, key) in optionData.Country" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="学位授予单位">
                                    <el-input v-model="queryDegreesParams.WorkUnit" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="专业名称">
                                    <el-input v-model="queryDegreesParams.Professional" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="学位证书编号">
                                    <el-input v-model="queryDegreesParams.CertificatNumber" clearable
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="学位说明">
                                    <el-input v-model="queryDegreesParams.Remark" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">

                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="警察证">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="警察证号码">
                                    <el-input v-model="queryPoliceCardParams.Number" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="发证机关">
                                    <el-input v-model="queryPoliceCardParams.Organization" clearable
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="发证日期">
                                    <el-date-picker v-model="queryPoliceCardParams.DateRange" type="daterange"
                                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                        value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="有效日期起始">
                                    <el-date-picker v-model="queryPoliceCardParams.EffectiveDateFromRange"
                                        type="daterange" range-separator="至" start-placeholder="开始时间"
                                        end-placeholder="结束时间" value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="有效日期结束">
                                    <el-date-picker v-model="queryPoliceCardParams.EffectiveDateEndRange"
                                        type="daterange" range-separator="至" start-placeholder="开始时间"
                                        end-placeholder="结束时间" value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="办证工作单位">
                                    <el-input v-model="queryPoliceCardParams.WorkUnit" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="惩戒信息">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="惩戒类别">
                                    <el-select class="w-[280px]" v-model="queryPunishParams.Category">
                                        <el-option v-for="(item, key) in optionData.PunishCategory" :key="key"
                                            :label="item.name" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="惩戒批准日期">
                                    <el-date-picker v-model="queryPunishParams.DateRange" type="daterange"
                                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                        value-format="YYYY-MM-DD" />

                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="解除惩戒时间">
                                    <el-date-picker v-model="queryPunishParams.RemoveDateRange" type="daterange"
                                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                        value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="批准机关名称">
                                    <el-input v-model="queryPunishParams.OrganizationName" clearable
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="批准机关代码">
                                    <el-input v-model="queryPunishParams.OrganizationCode" clearable
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="惩戒原因">
                                    <el-input v-model="queryPunishParams.Reason" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="批准惩戒文号">
                                    <el-input v-model="queryPunishParams.DocumentName" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="惩戒变化时间">
                                    <el-date-picker v-model="queryPunishParams.DateOfChangeRange" type="daterange"
                                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                        value-format="YYYY-MM-DD" />

                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="惩戒变化类别">
                                    <el-select class="w-[280px]" v-model="queryPunishParams.CategoryOfChange">
                                        :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="惩戒变化文号">
                                    <el-input v-model="queryPunishParams.DocumentNameOfChange" clearable
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="受惩戒时职务">
                                    <el-input v-model="queryPunishParams.PunishingPostion" clearable
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="撤销变更原因">
                                    <el-input v-model="queryPunishParams.RemoveReason" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="惩戒说明">
                                    <el-input v-model="queryPunishParams.Remark" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">

                            </el-col>
                            <el-col :span="8">

                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="年度考核">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="考核年度">
                                    <el-input v-model="queryAssessmentsParams.Year" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="考核结果">
                                    <el-input v-model="queryAssessmentsParams.Result" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="考核日期">
                                    <el-date-picker v-model="queryAssessmentsParams.DateRange" type="daterange"
                                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                        value-format="YYYY-MM-DD" />

                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="考核单位名称">
                                    <el-input v-model="queryAssessmentsParams.WorkUnit" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="考核单位代码">
                                    <el-input v-model="queryAssessmentsParams.WorkUnitCode" clearable
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="衔称">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="衔称">
                                    <el-input v-model="queryPoliceRankParams.Name" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="授衔单位">
                                    <el-input v-model="queryPoliceRankParams.WorkUnit" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="授衔来源">
                                    <el-input v-model="queryPoliceRankParams.Source" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="授衔单位代码">
                                    <el-input v-model="queryPoliceRankParams.WorkUnitCode" clearable
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="授衔令号">
                                    <el-input v-model="queryPoliceRankParams.OrderNumber" clearable
                                        style="width: 100%" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="变动原因">
                                    <el-input v-model="queryPoliceRankParams.Cause" clearable style="width: 100%" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="授衔起始日期">
                                    <el-date-picker v-model="queryPoliceRankParams.EffectiveDateFromRange"
                                        type="daterange" range-separator="至" start-placeholder="开始时间"
                                        end-placeholder="结束时间" value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="考核日期">
                                    <el-date-picker v-model="queryPoliceRankParams.EffectiveDateEndRange"
                                        type="daterange" range-separator="至" start-placeholder="开始时间"
                                        end-placeholder="结束时间" value-format="YYYY-MM-DD" />
                                </el-form-item>

                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="授衔日期">
                                    <el-date-picker v-model="queryPoliceRankParams.DateRange" type="daterange"
                                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                                        value-format="YYYY-MM-DD" />

                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="警衔类型">
                                    <el-select class="w-[280px]" v-model="queryPoliceRankParams.Category">
                                        :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">

                            </el-col>
                            <el-col :span="8">

                            </el-col>
                        </el-row>
                    </el-tab-pane>


                    <el-row :gutter="20">
                        <el-col :span="12" :offset="8">
                            <el-form-item class="button-group" style="text-align: center">
                                <el-button type="primary" @click="resetPage">查询</el-button>
                                <el-button @click="resetParams">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-tabs>



            </el-form>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
                <!-- <el-table-column label="id" prop="id" width="40" /> -->
                <el-table-column label="姓名" prop="realname" />
                <el-table-column prop="gender" label="性别" width="60">
                    <template #default="{ row }">
                        <el-tag class="ml-2" :type="row.gender == 1 ? '' : 'danger'">
                            {{ row.gender_txt }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="民族" prop="Nation" />
                <el-table-column label="出生日期" prop="BirthDayText" />
                <el-table-column label="身份证号" prop="IdCard" />
                <el-table-column label="警号" prop="PersonalNo" />
                <el-table-column label="电话" prop="mobile" />
                <el-table-column label="工作单位" prop="WorkUnit" />
                <!-- <el-table-column label="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button v-perms="['user.user/detail']" type="primary" link>
                            <router-link :to="{
                path: getRoutePath('user.user/detail'),
                query: {
                    id: row.id
                }
            }">
                                详情
                            </router-link>
                        </el-button>
                    </template>
                </el-table-column> -->
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup name="consumerLists">
import { reactive, ref, watch, toRef, toRefs } from 'vue'
import { usePaging } from '@/hooks/usePaging'
import { getRoutePath } from '@/router'
import { getUserList } from '@/api/consumer'
// import { nationData, BloodTypeData, MaritalStatusData, HealthStatusData } from '@/enums/memberEnums'
import { useDictData } from '@/hooks/useDictOptions'

const { dictData: optionData } = useDictData(
    'Position,BloodType,nation,MaritalStatus,HealthStatus,AccountNature,PersonalIdentity,ManagementCategory,PersonalStatus,OwnPoliceKind,PersonalJob,PoliticalStatus,Status,Relation,PersonalIdentity2,Nationality,Education,Category,Years,SchoolCategory,LearnStyle,PunishCategory'
)
const dateRange = ref([]); // 存储日期范围的ref
//console.log("字典数据", optionData)

const queryParams = reactive({
    //  tablename: 'member',
    realname: '',
    Nation: '',
    BloodType: '',
    gender: 1,
    BirthDayRange: '',
    NativePlace: '',
    ResidenceDomain: '',
    ResidenceOther: '',
    IdCard: '',
    GrowingPlace: '',
    MaritalStatus: '', //婚姻状况
    HealthStatus: '', //健康状况
    HealthDescription: '',
    PersonalNo: '',
    AccountNature: '',
    PersonalIdentity: '',
    PersonalCategory: '',
    Speciality: '',
    ManagementCategory: '',
    WorkUnit: '',
    CurrentPosition: '',
    OriginalPosition: '',
    PersonalStatus: '',
    TeamCategory: '',
    AdministrativeTeamMember: '',
    PartyCommitteeTeamMember: '',
    PersonalJob: '',
    OwnPoliceKind: '',
    PoliticalStatus: '',
    JoinGroupDateTimeRange: '',
    JoinPFDateTimeRange: '',
    JoinWorkDateTimeRange: '',
    JoinPoliceDateTimeRange: '',
    Status: '',
    PositionChangeTimeRange: '',
    OldWorkUnit: ''

})
/**家庭成员参数 */
const queryFamilyParams = reactive({
    // tablename: 'member_family',
    Name: '',
    Relation: '',
    Nation: '',
    BirthDayRange: '',
    PersonalIdentity: '',
    WorkUnit: '',
    WorkUnitAddress: '',
    Nationality: '',
    Education: '',
    Position: '',
    CurrentStatus: '',
    MigrateState: ''
})
/**履历参数 */
const queryCurriculumvitaesParams = reactive({
    //tablename: 'member_curriculumvitaes',
    WorkUnit: '',
    Category: '',
    Identity: '',
    PostLevel: '',
    Remark: '',
    Flag: '',
    StartDateRange: '',
    EndDateRange: ''

})
/**职务层级 */
const queryPotiongradesParams = reactive({
    //tablename: 'member_potiongrades',
    Name: '',
    GradeStartDateRange: '',
    GradeEndDateRange: '',
    LevelStartDateRange: '',
    PassDateRange: '',
    LogStatus: '',
    OrderNumber: '',
    AppointmentOrganizationName: '',
    Remark: ''
})
/**学历信息 */
const queryEducationParams = reactive({
    //tablename: 'member_educations',
    Name: '',
    JoinDateRange: '',
    GraduationDateRange: '',
    Years: '',
    SchoolName: '',
    SchoolCategory: '',
    SchoolType: '',
    Professional: '',
    CertificateNumber: '',
    LearnStyle: '',
    EducationInstructions: '',
    Remark: ''
})
/**学位信息 */
const queryDegreesParams = reactive({
    Name: '',
    StartDateRange: '',
    GetDateRange: '',
    Country: '',
    WorkUnit: '',
    Professional: '',
    CertificatNumber: '',
    Remark: ''
})
/**警察证信息 */
const queryPoliceCardParams = reactive({
    Number: '',
    Organization: '',
    DateRange: '',
    EffectiveDateFromRange: '',
    EffectiveDateEndRange: '',
    WorkUnit: ''
})
/**惩戒信息 */
const queryPunishParams = reactive({
    Category: '',
    DateRange: '',
    RemoveDateRange: '',
    OrganizationName: '',
    OrganizationCode: '',
    Reason: '',
    DocumentName: '',
    DateOfChangeRange: '',
    CategoryOfChange: '',
    DocumentNameOfChange: '',
    PunishingPostion: '',
    RemoveReason: '',
    Remark: ''
})
const queryAssessmentsParams = reactive({
    // tablename: 'member_assessments',
    Year: '',
    Result: '',
    DateRange: '',
    WorkUnit: '',
    WorkUnitCode: ''
})
/**衔称参数 */
const queryPoliceRankParams = reactive({
    //tablename: 'member_policeranks',
    WorkUnit: '',
    Name: '',
    Source: '',
    WorkUnitCode: '',
    OrderNumber: '',
    DateRange: '',
    EffectiveDateFromRange: '',
    EffectiveDateEndRange: '',
    Category: '',
    Cause: ''
})
/*表单查询参数 */
const tableParams = reactive({
    PoliceRank: queryPoliceRankParams,
    Assessment: queryAssessmentsParams,
    Punish: queryPunishParams,
    PoliceCard: queryPoliceCardParams,
    Degrees: queryDegreesParams,
    Education: queryEducationParams,
    Potiongrades: queryPotiongradesParams,
    Curriculumvitaes: queryCurriculumvitaesParams,
    Family: queryFamilyParams,
    Member: queryParams

});
/** 查询用户*/
const searchUser = () => {

}
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: getUserList,
    params: tableParams
})

/**出生日期变化 */
const DateChangeBirthDay = (value: any) => {
    // 在选择日期范围变化时触发
    console.log('选择的日期范围变化:', value, dateRange)
    // 这里可以处理日期范围的变化逻辑
}
//getLists()
</script>
<style scoped>
.button-group {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>